<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>租用房屋</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="http://localhost:8080/assets/img/favicon.ico">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=ecFKBgybbbn2l3TscOAV60ivvZuBQB6P"></script>

    <!-- CSS here -->
    <link rel="stylesheet" href="http://localhost:8080/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/slicknav.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/animate.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/themify-icons.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/slick.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/nice-select.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/style.css">
</head>
<body>
<div th:replace="template.html::header"></div>
<main th:object="${house}">
    <!-- Hero Area Start-->
    <div class="slider-area gray-bg position-relative" th:style="'background-image: url(' + ${house.getPic()} + ')'">
        <div class="single-slider d-flex align-items-center slider-height2">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hero-caption hero-caption2">
                            <h2 style="color: whitesmoke;-webkit-text-stroke: 1px black"
                                th:text="${house.getName()}"></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->
    <div class="job_details_area section-bg2">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="job_details_header">
                        <div class="single_jobs white-bg d-flex justify-content-between">
                            <div class="jobs_left d-flex align-items-center">
                                <div class="thumbx">
                                    <img th:src="${house.getPic()}" alt="">
                                </div>
                                <div class="jobs_conetent">
                                    <a><h4 th:text="${house.getName()} + ${house.getIsRent()==1?'(租用中)':''}"
                                           th:style="${house.getIsRent() == 1 ? 'color: red':''}"></h4></a>
                                    <div class="links_locat d-flex align-items-center">
                                        <div class="location">
                                            <p><i class='fas fa-map-marker-alt'>
                                            </i><a id="location" th:text="${house.getLocation()}"></a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="descript_wrap white-bg">
                        <div class="single_wrap">
                            <h4>房屋描述</h4>
                            <div th:text="${house.getDesc()}"></div>
                        </div>
                        <div class="single_wrap">
                            <h4>地理位置</h4>
                            <div id="allmap" style="width: 300px;height: 300px"></div>
                        </div>
                        <div class="single_wrap">
                            <h4>房间</h4>
                            <div th:text="${house.getRoom()}"></div>
                        </div>
                        <div class="single_wrap">
                            <h4>面积大小</h4>
                            <div th:text="${house.getArea()} + 'm²'"></div>
                        </div>
                        <div class="single_wrap">
                            <h4>价格</h4>
                            <div style="color: red" id="money" th:text="${house.getPrice()} + '元/每月'"></div>
                        </div>
                        <div th:if="${user.getId() != owner.getId() && house.getIsRent() == 0}" class="single_wrap">
                            <label style="display: none">
                                <input name="house-id" th:value="${house.getId()}">
                            </label>
                            <div class="col-md-6">
                                <h4>租用月数</h4>
                                <label>
                                    <input id="pre-months" type="number" name="months" value="1" min=1>
                                </label>
                            </div>
                            <div class="col-md-12" style="margin-top: 10px">
                                <div class="submit_btn">
                                    <button onclick="pay()" class="boxed-btn3 w-100" type="submit">支付
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="job_sumary">
                        <div class="summery_header">
                            <h3>卖家</h3>
                        </div>
                        <div class="job_content">
                            <ul>
                                <li>名字: <span th:text="${owner.getName()}"></span></li>
                                <li>电话: <span th:text="${owner.getPhone()}"></span></li>
                            </ul>
                            <a class="boxed-btn3 w-100" th:href="'personal-info?id=' + ${owner.getId()}">查看卖家信息</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pay"
         style=" z-index: 12;position: fixed;left: 0;top:0;right: 0;bottom:0;background-color: rgba(0,0,0,0.5);display: flex;justify-content: center;align-items: center">
        <div class="col-lg-4" style="background-color: whitesmoke;border-radius: 30px;display: grid">
            <svg id="close" style="justify-self: right;cursor: pointer;" width="40" height="40"
                 viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
                      fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
                <path d="M29.6567 18.3432L18.343 29.6569" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"/>
                <path d="M18.3433 18.3432L29.657 29.6569" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"/>
            </svg>
            <div class="job_sumary" style="margin: 50px;justify-content: center;align-items: center;">
                <div class="summery_header">
                    <h3>请扫描二维码</h3>
                    <h5 id="show-money"></h5>
                    <img id="qr-code" style="width: 300px;height: 300px"
                         src="">
                </div>
                <form method="post" action="add-order" class="row">
                    <label style="display: none">
                        <input style="display: none" name="house-id" th:value="${house.getId()}">
                    </label>
                    <input id="months" style="display: none" type="number" name="months">
                    <div class="col-md-12" style="margin-top: 10px">
                        <div class="submit_btn">
                            <button id="btn-phone" class="boxed-btn3 w-100" type="submit">支付
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>
<div th:replace="template.html::footer"></div>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>
</body>
<script>
    document.getElementById('pay').hidden = true
    document.getElementById('close').onclick = () => {
        document.getElementById('pay').hidden = true
    }

    window.onload = function () {
        var map = new BMapGL.Map('allmap');
        map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 12);
        //创建地址解析器实例
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        var location = document.getElementById('location').innerText
        myGeo.getPoint(location, function (point) {
            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMapGL.Marker(point, {title: location}))
            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, location)
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    }

    function pay() {
        document.getElementById('pay').hidden = false
        let money = document.getElementById('money').innerText
        if (money === '') money = 'N/A'
        document.getElementById('show-money').innerText = '支付金额为: ' + money
        document.getElementById('qr-code').src = 'https://api.pwmqr.com/qrcode/create/?url=支付金额为: ' + money
        document.getElementById('months').value = document.getElementById('pre-months').value
    }
</script>
</html>